<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="page"
    :loading="load"
    :scroll="{ x: 1300 }"
    @change="pageQuery"
    :row-class-name="tableRowClass"
    ref="tab"
    :locale="locale"
    rowKey="id"
    size="middle"
  >
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
    <!-- <slot></slot> -->
  </a-table>
</template>

<script>

// 默认分页信息
// const defaultPage = {
//   // 第几页
//   current: 1,
//   // 条数统计
//   total: 0,
//   // 每页几条
//   pageSize: 10,
//   // 指定每页可以显示多少条
//   pageSizeOptions: ['10', '20', '30', '40'],
//   // 是否可以改变 pageSize
//   showSizeChanger: true,
//   // 用于显示数据总量和当前数据顺序
//   showTotal: this.pageShowTotal,
// }

export default {
  props: {
    // 是否提交时执行查询
    created: { type: Boolean, default: false },
    // 执行查询的方法
    url: { type: Function, default: undefined },
    // 表格列的配置描述
    columns: { type: Array },
    // 查询参数转换钩子函数 ！！！必须返回！！！
    paramsConv: { type: Function, default: () => ({}) },
    // 查询结果转换钩子函数 ！！！必须返回！！！
    dataConv: { type: Function, default: (data) => data },
    // 分页参数转换钩子函数 ！！！必须返回！！！
    pageConv: {
      type: Function,
      default: (current, pageSize) => ({ pageNum: current, pageSize })
    },
    // 行置灰
    puTheAsh: { type: String, default: '' }
  },
  data () {
    return {

      data: [],
      // 分页信息
      page: {
        // 第几页
        current: 1,
        // 条数统计
        total: 0,
        // 每页几条
        pageSize: 10,
        // 指定每页可以显示多少条
        pageSizeOptions: ['10', '20', '30', '40'],
        // 是否可以改变 pageSize
        showSizeChanger: true,
        // 用于显示数据总量和当前数据顺序
        showTotal: this.pageShowTotal
      },
      // 表格加载状态
      load: false
    }
  },
  computed: {
    getTotal () {
      return this.page.total
    }
  },
  methods: {
    // 点击查询按钮，重置分页信息查询
    searchQuery () {
      this.page = {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showSizeChanger: true,
        showTotal: this.pageShowTotal
      }
      this.getGridData()
    },
    // 点击分页器进行查询
    pageQuery (pagination) {
      this.page = pagination
      this.getGridData()
    },
    // 查询参数转换钩子函数 ！！！必须返回！！！
    queryParamsTransForm (params) {
      return params
    },
    // 查询结果转换钩子函数 ！！！必须返回！！！
    queryDataTransForm (data) {
      return data
    },
    // 分页参数转换钩子函数 ！！！必须返回！！！
    queryPageTransForm (current, pageSize) {
      return { pageNum: current, pageSize }
    },
    // 分页器显示条数
    pageShowTotal (total) {
      return `共${total}条`
    },
    // 查询
    async getGridData () {
      if (!this.url) {
        this.$message.newFun('未设置url', 'error', 3)
        return
      }
      this.load = true
      const { current, pageSize } = this.page
      const queryPage = this.pageConv(current, pageSize)
      const queryParams = this.paramsConv()
      const params = Object.assign({}, queryParams, queryPage)
      const res = await this.url(params)
      const { data: responseData } = res
      if (responseData.isSuccess) {
        let { records, current, total } = responseData.data
        if (records === null) {
          records = []
        }
        this.data = this.dataConv(records)
        Object.assign(this.page, { current, total })
      } else {
        this.$message.newFun(responseData.msg, 'error', 3)
      }
      this.load = false
    },
    // 一行置灰
    tableRowClass (record, index) {
      console.log()
      if (this.puTheAsh === 'nmCnt') {
        if (record[this.nmCnt] === 5) {
          return 'rowClass'
        }
      }
      return ''
    }
  },
  mounted () {},
  created () {
    if (!this.created) {
      // this.queryReset()
      this.getGridData()
    }
  }
}
</script>
<style >
.rowClass {
  color: #1890ff;
}
</style>
